<template>
	<div class="tableBtnWrap">
        <template v-if="type == 'add'">
            <!--输入按钮名称-->
            <div class="inputList">
                <div class="inputListName verMiddle">
                    <span style="color:red;">*</span>
                    <span>名称：</span>
                </div>
                <el-input v-model="btnName" placeholder="请输入按钮的名称" clearable />
            </div>
            <div class="inputFunction">
                <p class="tableBtnTit">
                    <span>选择使用功能：</span>
                    <a
                        class="addOptionBtn addOptionBtnNo" 
                        @click="radioSelect = ''"
                        href="javascript:void(0);">
                        <span>取消选中</span>
                    </a>
                </p>
                <el-radio-group v-model="radioSelect">
                    <el-radio  
                        v-for="(item,index) in allBtnArray"
                        :key="index"
                        :label="index" 
                        border>{{item}}</el-radio>
                </el-radio-group>
            </div>
            <div class="inputPreview">
                <p class="tableBtnTit"><span>实时预览：</span></p>
                <el-button>{{btnName}}</el-button>
            </div>
            <div class="btnArea">
                <el-button @click="cancelTem">关闭</el-button>
                <el-button @click="addBtnMet" type="primary">添加</el-button>
            </div>
        </template>
        <template v-if="type == 'delete'">
            <p class="tableBtnTit"><span>按钮列表：</span></p>
            <ul class="tableBtnUl">
                <li class="tableBtnLi" v-for="(item,index) in tableBtnArray" :key="index">
                    <span class="tableBtnLabel">{{item.name}}</span>
                    <el-button @click="tableBtnDeleteMet(item,index)" type="danger">删除</el-button>
                </li>
            </ul>
            <div class="btnArea">
                <el-button @click="cancelTem">关闭</el-button>
            </div>
        </template>
	</div>
</template>
<script type="text/javascript">
	
	export default{
        props:{
			type:""
		},
		data () {
			return {
				tableBtnArray:[],
                btnArray:[{
                    name:"下载",
                    function:"",
                    routerPath:"",
                }],
                btnName:"",
                allBtnArray:['跳转页面','打开弹窗','上传文件','导出Excel','批量删除'],
                radioSelect:''
			}
		},
		async created (){
            //查看已经
            const result = await this.$util.native.readJson(this.$pinia.state.value.routeConfig.nowItem);
            this.tableBtnArray = result.btnUse;
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			async tableBtnDeleteMet(item,index){
                this.tableBtnArray.splice(index,1);
                await this.$util.native.deleteTableBtn(this.$pinia.state.value.routeConfig.nowItem,index);
                //刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
            },
            cancelTem(){
                this.$mitt.emit("closeEditComponent");
            },
            async addBtnMet(){
                if(this.btnName == ''){
                    this.$message.error("请输入按钮名称");
                    return
                }
                var type = '';
                if(this.radioSelect !== ''){
                    type = this.allBtnArray[this.radioSelect];
                }
                var btnItem = {
                    "name":this.btnName,
                    "type":type
                }
                console.log(this.$pinia.state.value.routeConfig.nowItem);
                //新增按钮
                await this.$util.native.addTableBtn(this.$pinia.state.value.routeConfig.nowItem,btnItem);
                //重置
                this.btnName = '';
                this.radioSelect = '';
                //刷新画板展示
				this.$mitt.emit("onlyRefreshComponent");
            },
            isUsed(item){
                if(this.tableBtnArray.indexOf(item) == -1){
                    return false;
                }else{
                    return true;
                }
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.tableBtnWrap{
        width: 300px;
        .tableBtnTit{
            font-size: 14px;
            color:#999;
            margin-bottom:16px;
            .addOptionBtn{
                display:inline-block;
                width:26px;
                height:26px;
                line-height:26px;
                text-align:center;
                border:1px solid #E5E6EC;
                border-radius:100%;
            }
            .addOptionBtnNo{
                width:96px;
                border-radius:0;
                margin-right:5px;
                font-size:12px;
            }
        }
        .inputFunction{
            margin-bottom:10px;
            padding-top:16px;
            border-top:1px solid #E5E6EC;
            .el-radio.is-bordered{
                margin-right:10px;
                margin-bottom:10px;
            }
        }
        .inputPreview{
            padding-top:16px;
            border-top:1px solid #E5E6EC;
        }
        .btnArea{
			margin-top: 40px;
            .el-button{
                width: 25%;
            }
        }
        .inputList{
		    overflow: hidden;
		    margin-bottom: 10px;
            margin-top:20px;
            .el-input{
                float: left;
                width: 80%;
            }
            .inputListName{
                float: left;
                width:20%;
                line-height:40px;
                text-align: left;
                font-size:14px;
            }
        }
        .tableBtnUl{
            padding-left: 0;
            .tableBtnLi{
                border-bottom:1px solid #E5E6EC;
                height: 50px;
                .tableBtnLabel{
                    font-size: 14px;
                    line-height:50px;
                }
                .el-button{
                    float: right;
                    margin-top: 9px;
                }
            }
        }
    }
</style>